<template>
  <div>
    <el-card style="margin:20px 0">
      <!-- 行内表单三级联动全局组件 -->
      <Level3Linkage :show="scene !== 0" @getCategoryId="getCategoryId" />
    </el-card>
    <el-card>
      <!-- 底部这里将来是三部分进行切换 -->
      <!-- 展示SPU列表的结构 -->
      <div v-show="scene === 0">
        <el-button type="primary" icon="el-icon-plus" :disabled="!cForm.category3Id" @click="addSpu">添加SPU</el-button>
        <el-table
          :data="records"
          style="width: 100%"
          border=""
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column
            prop="spuName"
            label="SPU名称"
            width="width"
          />
          <el-table-column
            prop="description"
            label="SPU描述"
            width="width"
          />
          <el-table-column
            prop="prop"
            label="操作"
            width="width"
          >
            <template slot-scope="{row}">
              <!-- 这里按钮将来用hintButton替换 -->
              <hint-button type="success" icon="el-icon-plus" size="mini" title="添加sku" @click="addSku(row)" />
              <hint-button type="warning" icon="el-icon-edit" size="mini" title="修改spu" @click="updateSpu(row)" />
              <hint-button type="info" icon="el-icon-info" size="mini" title="查看当前spu全部sku列表" @click="showSkuInfo(row)" />
              <!-- 气泡确认框 -->
              <el-popconfirm
                :title="`你确定要删除${row.spuName}吗？`"
                @onConfirm="deleteSpu(row)"
              >
                <hint-button slot="reference" type="danger" icon="el-icon-delete" size="mini" title="删除spu" />
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <!--  @size-change="handleSizeChange" 当分页器的某一个展示数据条数发生变化
              @current-change="getSpuList"   点击分页器第几页按钮的回调-->
        <el-pagination
          style="text-align:center"
          :current-page="page"
          :page-sizes="[2, 3, 4]"
          :page-size="limit"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getSpuList"
          @size-change="handleSizeChange"
        />
      </div>
      <!-- 添加 | 修改spu模块 -->
      <SpuForm v-show="scene === 1" ref="Spu" @changeScene="changeScene" />
      <!-- 添加sku模块 -->
      <SkuForm v-show="scene === 2" ref="Sku" @changeScenes="changeScenes" />
    </el-card>
    <!--  -->
    <el-dialog :title="`${spu.spuName}的Sku列表`" :visible.sync="dialogTableVisible" :before-close="closeDialog">
      <!-- Table展示sku列表 -->
      <el-table
        v-loading="loading"
        :data="skuList"
        style="width: 100%"
        border=""
      >
        <el-table-column
          prop="skuName"
          label="名称"
          width="width"
        />
        <el-table-column
          prop="price"
          label="价格"
          width="width"
        />
        <el-table-column
          prop="weight"
          label="重量"
          width="width"
        />
        <el-table-column
          label="默认图片"
          width="width"
        >
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" alt="" style="width:100px;height:100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
export default {
  name: 'Spu',
  components: {
    SpuForm, SkuForm
  },
  data() {
    return {
      // 接受子组件传递过来的id
      cForm: {},
      page: 1, // page:当前页数
      limit: 3, // limit一页显示几个数据
      records: [], // 接收服务器返回的SPU表格数据
      total: 0, // 接收服务器返回的total
      scene: 0, // 0代表显示SPU列表数据  1代表显示 新增|修改SPU   2代表添加SKU
      /* ----------------------------------------------------------------------- */
      dialogTableVisible: false, // 控制sku详情 dialog对话框显示与隐藏
      spu: {}, // dialog需要的表头信息
      skuList: [], // 服务器获取的sku信息
      loading: false // dialog表格的loading效果
    }
  },
  methods: {
    // 三级联动子组件传递过来的category1~3id
    getCategoryId(cForm) {
      this.cForm = cForm
      // 不能在mounted里发请求，因为需要点击三级联动最后一个行内表单获取spu模块数据
      this.getSpuList()
    },
    // 获取spu表格数据的方法
    async getSpuList(pages = 1) {
      this.page = pages
      const { page, limit } = this
      const result = await this.$API.spu.reqSpuList(page, limit, this.cForm.category3Id)
      if (result.code === 200) {
        this.records = result.data.records
        this.total = result.data.total
      }
    },
    // 当分页器的某一个展示数据条数发生变化
    handleSizeChange(limit) {
      // 修改当前每页展示的个数
      this.limit = limit
      // 再次发起请求展示数据
      this.getSpuList()
    },
    // 点击添加SPU的回调
    addSpu() {
      // 切换到添加|修改SPU模块
      this.scene = 1
      // 如果是添加SPU，需要给spu传递category3Id
      this.$refs.Spu.spu.category3Id = this.cForm.category3Id
      // 通过$ref获取子组件spuForm 并初始化 修改spu 子组件数据（添加发两个请求，一个获取品牌列表，一个获取平台三个属性）
      this.$refs.Spu.addSpuDate()
    },
    // 点击修改某一个SPU的回调
    updateSpu(row) {
      // 切换到添加|修改SPU模块
      this.scene = 1
      // 通过$ref获取子组件spuForm 并初始化 修改spu 子组件数据
      this.$refs.Spu.initSpuDate(row)
    },
    // 点击删除某一个SPU按钮的回调
    async deleteSpu(row) {
      const result = await this.$API.spu.reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message({ type: 'success', message: '删除成功' })
        // 代表SPU个数大于1  删除的时候停留在当前页，如果SPU个数小于1 回到上一页
        if (this.records.length > 1) {
          this.getSpuList(this.page)
        } else {
          this.getSpuList(this.page - 1)
        }
      }
    },
    // 添加spu子组件(spuForm)取消按钮的自定义事件
    changeScene({ scene, flag }) {
      // flag这个形参为了区分保存按钮是添加还是修改
      // 切换结构(场景)
      this.scene = scene
      // 子组件通知父组件切换场景，需要再次获取spu列表的数据进行展示
      if (flag === '添加') {
        this.getSpuList()
      } else {
        this.getSpuList(this.page)
      }
    },
    /* ----------------------------------SKU部分----------------------------- */
    // 添加sku子组件(skuForm)取消按钮的自定义事件
    changeScenes(scene) {
      this.scene = scene
    },
    // 点击添加sku按钮
    addSku(row) {
      // 切换场景
      this.scene = 2
      // 父组件调用子组件的方法，让子组件发请求---三个请求。通过$ref获取子组件skuForm 并初始化子组件数据
      // 三个请求需要传递四个参数，row里有两个
      this.$refs.Sku.getInitDate(row, this.cForm.category1Id, this.cForm.category2Id)
    },
    // 点击查看该spu下的sku列表按钮
    async showSkuInfo(row) {
      // 显示loading效果
      this.loading = true
      // 点击这个按钮显示dialog对话框
      this.dialogTableVisible = true
      // 保存row数据到spu
      this.spu = row
      // 发送请求，获取sku详细信息进行展示
      const result = await this.$API.spu.reqSkuList(row.id)
      if (result.code === 200) {
        this.skuList = result.data
        // loading隐藏
        this.loading = false
      }
    },
    // 点击关闭dialog
    closeDialog(done) {
      // 重置skuList，避免关闭后数据未清，直接点击下个spu时会出现上次数据
      this.skuList = []
      // 关闭对话框
      done()
    }
  }
}
</script>

<style>

</style>
